<template>
    <!-- 新增角色和编辑 -->
    <h2>{{ route.query.id ? "编辑角色" : "新增角色" }}</h2>
    <el-form>
      <el-form-item label="角色名称">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="前端名称">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="角色状态">
        <el-radio>启用</el-radio>
        <el-radio>禁用</el-radio>
      </el-form-item>
      <div>
        <el-button type="primary"> 确定 </el-button>
      </div>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { FormInstance, ElMessageBox, ElMessage } from "element-plus"
  import { reactive, ref, watch } from "vue";
  import { user } from "@/api";
  import { useRoute } from "vue-router";
  const route = useRoute();
  
//   {
//   createTime: "2022-11-12T21:11:55.364Z",
//   hidden: 0,
//   icon: "string",
//   ilevel: 0,
//   name: "string",
//   d: 0,
//   parentId: 0,
//   sort: 0,
//   title: "string"
// }
  // 新增角色的逻辑，就是 对表单进行验证，然后向服务器发请求
//   const form = reactive<getMenuAddParams>({
// //   createTime: "",
// //   hidden: 0,
// //   icon: "",
// //   ilevel: 0,
// //   name: "",
// //   d: 0,
// //   parentId: 0,
// //   sort: 0,
// //   title: ""
// });



// const rules = {
//     name: [
//         { required: true, message: "请输入账号", trigger: "blur" },
//         { min: 6, max: 20, message: "账号要在6~20个字符之间", trigger: "blur" },
//     ],
//     nickName: [
//         { required: true, message: "请输入姓名", trigger: "blur" },
//         { min: 6, max: 20, message: "姓名要在6~20个字符之间", trigger: "blur" },
//     ],
//     email: [
//         { required: true, message: "请输入邮箱", trigger: "blur" },
//         { type: "email", message: "请填空正确的邮箱地址", trigger: ["blur", "change"] },
//     ],
//     password: [
//         { required: true, message: "请输入密码", trigger: "blur" },
//         { message: "密码要在6~20个字符之间", trigger: "blur" },
//     ]
// }

// const props = defineProps({
//     show: {
//         type: Boolean,
//         default: true,
//     },
//     data: {
//         type: Number,
//         default: 0,
//     },

// });

// const emit = defineEmits(["hide", "refresh"])

// // 点击确定
// const formRef = ref<FormInstance>()

// const sureFn = () => {
//     // 表单检验，如果通过，再弹出提示
//     formRef.value?.validate((valid: boolean) => {
//         if (valid) {
//             ElMessageBox.confirm("确定要添加该用户吗？", "添加用户", {
//                 type: "warning",
//                 confirmButtonText: "确定",
//                 cancelButtonText: "取消",
//             })
//                 .then(() => {
//                     // 点击确定的回调\
//                     // 如果是编辑  发起修改用户信息请求
//                     if (props.data !== 0) {
//                         user.getMenuAddApi(form as IUserModel).then((res) => {
//                             if (res.code === 200) {
//                                 // 提示用户
//                                 ElMessage.success("修改信息成功")
//                                 // 关闭对话框
//                                 emit("hide")
//                                 // 刷新表格
//                                 emit("refresh")
//                             }
//                         })
//                     } else {
//                         // 如果是新增，发注册用户的请求
//                         // 发请求把用户添加到后端
//                         user.registerUserApi(form).then((res) => {
//                             if (res.code === 200) {
//                                 // 添加成功
//                                 ElMessage.success("用户添加成功！")
//                                 // 关闭添加的弹出
//                                 emit("hide");
//                                 // 通知父组件刷新表格
//                                 emit("refresh")
//                                 // 关闭dialog后进行清空

//                             } else {
//                                 // 添加失败
//                                 ElMessage.error(res.messaeg + "请重试")
//                             }
//                         })
//                     }

//                 })
//                 .catch(() => { });
//         } else {
//             return false;
//         }
//     });
// };
  
  // 编辑的逻辑，如果有id传递过来，先把旧的数据展示，然后编辑之后，向服务器发请求
  
  // 但是要注意，编辑/删除 的时候千万不动 原有 (商品/订单/超级管理员) 的数据
  </script>
  
  <style lang="less" scoped>

</style>